<template>
    <cmDialog v-model="visible" :modalTitle="update ? '新增' : '修改'">
        <div style="padding: 20px 40px;">
            <el-form ref="updatePermRef" :model="updatePermForm" :rules="updatePermRules" label-width="80px">
                <el-form-item label="权限名称" prop="permmenu">
                    <el-input v-model="updatePermForm.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="权限菜单" prop="name">
                    <el-input v-model="updatePermForm.describe" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="权限说明" prop="describe">
                    <el-input v-model="updatePermForm.describe" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="updatePermForm.status" class="ml-4">
                        <el-radio label="1">正常</el-radio>
                        <el-radio label="2">禁止</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="dialog-foot">
                <el-button @click="handleAddCancel">取消</el-button>
                <el-button type="primary" @click="handleAddFormSubmit(updatePermRef)">确定</el-button>
            </div>
        </div>
    </cmDialog>
</template>
<script lang="ts" setup>
import cmDialog from '@/components/cm-dialog/index.vue'
import { ref, reactive, computed, onMounted } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'

const visible = ref(false)
const update = ref(false)
const menuList = ref([])

const updatePermForm = reactive<{ name: string, status: string, describe: string}>({ 
    status: '正常', name: '1', describe: "角色说明"
});

const updatePermRules = reactive<FormRules>({
    permmenu: [
        { required: true, message: '请输入权限菜单', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入权限名称', trigger: 'blur' }
    ],
    describe: [
        { required: true, message: '请输入权限说明', trigger: 'blur' }
    ],
    status: [
        { required: true, message: '请输入状态', trigger: 'change' }
    ]
})
const updatePermRef = ref<FormInstance>()

const init = (isUpdate: boolean, row: any) => {
	visible.value = true
    update.value = isUpdate
    
    if(isUpdate) { // isUpdate  true-新增  、false-编辑row有数据 反显
        // 重置画面数据

    }
}

const handleAddCancel = () => {
    updatePermRef.value?.resetFields();
    visible.value = false
}
const handleAddFormSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    visible.value = false
}
defineExpose({
	init
})
</script>
<style scoped>
.dialog-foot {
	text-align: center;
}
</style>